<template>
  <!-- 单页面应用主体 -->
  <div>
    <div id="header" @keyup.enter="search">
      <!-- PC导航 -->
      <div id="nav">
        <div id="nav-list">
          <router-link to="/">
            <img class="logo" :src="logo" alt srcset>
          </router-link>
          <div id="nav-left-box">
            <ul class="nav-ul">
              <li class="nav-item" v-for="(item,index) in navList" :key="index">
                <router-link class="links" :to="item.url">
                  <Icon class="nav-icon" :type="item.icon"/>
                  {{ item.name }}
                </router-link>
              </li>
            </ul>
            <div id="search-box">
              <Input suffix="ios-search" placeholder="请输入关键词 | Enter" v-model="value" style="width:auto"/>
            </div>
          </div>
        </div>
      </div>
      <!-- app导航 -->
      <div id="mobile-nav" v-show="!openNav">
        <div id="openNav" @click="openNav = true">
          <img id="nav-open" src="static/default/nav-list.png" alt srcset>
        </div>
        <router-link id="logo-box" to="/">
          <img class="mobile-logo" :src="logo" alt srcset>
        </router-link>
      </div>
    </div>
    <!-- 侧导航 -->
    <Drawer title="码农社区" placement="left" :width="45" :closable="false" v-model="openNav">
      <p class="dr-item" v-for="(item,index) in navList" :key="index">
        <router-link tag="div" :to="item.url">{{ item.name }}</router-link>
      </p>
    </Drawer>
    <!-- 页面主体 -->
    <router-view/>
  </div>
</template>
<script>
export default {
  data() {
    return {
      openNav: false,
      navList: this.global.navList,
      logo: this.global.logo,
      value:''//输入值
    };
  },
  methods:{
    search(){
      let str = this.value;
      this.$router.push({ path: '/list', query:{typeName:str} });
    }
  }
};
</script>
<style scoped>
#header {
  position: absolute;
  top: 0;
  left: 0;
  background: transparent;
  width: 100%;
  z-index: 9999;
}
#nav {
  width: 1200px;
  height: 60px;
  margin: 0 auto;
}
#nav-left-box {
  display: flex;
  flex-direction: row;
  justify-content: right;
}
#mobile-nav {
  display: none;
  height: 40px;
  overflow: hidden;
}
#search-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 30px;
}
#openNav {
  width: 40px;
  height: 40px;
  float: right;
}
#logo-box {
  float: left;
}
#nav-open {
  width: 30px;
  height: 30px;
  margin: 5px;
}
/* 导航 */
#nav-list {
  display: flex;
  justify-content: space-between;
  height: 60px;
}
.nav-ul {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: right;
}
.nav-item {
  list-style: none;
  line-height: 60px;
  height: 60px;
  width: 140px;
  text-align: center;
}
.nav-item .links {
  color: #fff;
  font-size: 16px;
  display: block;
}
.nav-icon {
  font-size: 20px;
  margin-right: 5px;
  position: relative;
  top: -1px;
}
.logo {
  display: inline-block;
  width: 200px;
  height: 50px;
  margin: 5px;
}
.mobile-logo {
  display: inline-block;
  width: 140px;
  height: 30px;
  margin: 5px;
}
.links:hover {
  font-weight: bold;
  font-size: 18px;
}
/* 手机导航 */
.dr-item {
  font-size: 16px;
  line-height: 40px;
  height: 40px;
}
@media screen and (max-width: 1200px) {
  #mobile-nav {
    display: block;
    height: 40px;
  }
  #nav {
    display: none;
  }
}
</style>
